<script>
import mixin from "../../common/mixin";
import { mapGetters } from 'vuex'
export default {
  name: "index",
  mixins: [mixin],
  data() {
    return {
      action: this.$baseUrl + '/api/upload/file',
      fileList: [],
      dataList: [],
    }
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  onLoad() {
    this.getList()
  },
  methods: {
    getList() {
      if (!this.userInfo.id) {
        uni.showToast({
          title: '请先登录',
          icon: 'none'
        })
        return
      }
      uni.showLoading({
        title: '加载中'
      })
      this.$api.getCompanyFileList({
        user_id: this.userInfo.id
      }).then(res => {
        this.dataList = res
      }).finally(() => {
        uni.hideLoading()
      })
    },
    successFile(e) {
      console.log(e)
      this.$api.createCompanyFile({
        user_id: this.userInfo.id,
        image: e.data.url
      }).then(() => {
        this.getList()
      })
      this.fileList = []
    },
    removeFile() {
      // 删除图片
      this.form.avatar_url = ''
    },
    toView(item,index) {
      uni.previewImage({
        urls: this.dataList.map(item => item.image),
        current: index
      })
    },
    routerBack() {
      uni.navigateBack()
    },
  }
}
</script>

<template>
  <div class="image">
    <div class="header">
      <div class="left-icon" @click="routerBack">
        <u-icon name="arrow-left" size="36"></u-icon>
      </div>
      <span>企业风采</span>
    </div>
    <div class="top"></div>
    <div class="list-view">
      <div class="empty-image" v-if="dataList.length === 0">
        <image style="width: 382rpx;height: 286rpx" src="/static/company/empty.png"></image>
        <div class="text">快来上传您的企业风采照片吧</div>
      </div>
      <scroll-view scroll-y="true" @scrolltolower="onScroll" style="height: 100%">
        <div class="image-list">
          <div class="image-item" v-for="item in dataList">
            <image :src="item.image" style="width: 160rpx;height: 160rpx" @click="toView(item)"></image>
          </div>
        </div>
<!--        <u-loadmore v-if="dataList.length" :status="loading" />-->
      </scroll-view>
    </div>
    <u-upload style="width: 0rpx;height: 0px;border-radius: 50%;overflow:hidden;" :action="action" max-count="999999999" :file-list="fileList" @on-success="successFile" @on-remove="removeFile">
      <div slot="addBtn">
        <image class="add" src="/static/post/add.png"></image>
      </div>
    </u-upload>

  </div>
</template>

<style lang="scss">
.image {
  height: 100%;
  background-color: #ffffff;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0 24rpx 24rpx 24rpx;
  box-sizing: border-box;

  .header {
    left: -24rpx;
    width: 100vw;
    position: relative;
    text-align: center;
    height: 80rpx;
    line-height: 80rpx;
    background-color: transparent;
    font-size: 32rpx;
    color: #000000;
    z-index: 2;
    .left-icon {
      position: absolute;
      left: 32rpx;
      top: 50%;
      transform: translateY(-50%);
    }
  }

  .add {
    position: fixed;
    right: 80rpx;
    bottom: 200rpx;
    width: 80rpx;
    height: 80rpx;
  }
  .empty-image {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 99;
    .text {
      height: 34rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #979797;
      line-height: 28rpx;
      text-align: center;
      font-style: normal;
      text-transform: none;
    }
  }
  .image-list {
    display: flex;
    flex-wrap: wrap;
    .image-item {
      padding: 24rpx 12rpx;
    }
  }
  .list-view {
    flex-grow: 1;
    overflow: hidden;
    padding:24rpx;
    position: relative;
    background-color: #ffffff;
    border-radius: 32rpx;
  }
  .top {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    height: 522rpx;
    background: linear-gradient( 180deg, #05C8CE 0%, rgba(223,254,255,0.5) 100%);
    border-radius: 0rpx 0rpx 0rpx 0rpx;
  }
}
</style>
